<template>
  <div
    class="widget-view"
    :class="{
      active: selectWidget.key == element.key,
      is_req: element.options.required,
    }"
    @click.stop="handleSelectWidget(widgetIndex)"
  >
    <div class="widget-view-model">
      <span>{{element.model}}</span>
    </div>
    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <i
        class="iconfont icon-icon_clone"
        @click.stop="handleWidgetClone(widgetIndex)"
      ></i>
      <i
        class="iconfont icon-trash"
        @click.stop="handleWidgetDelete(widgetIndex)"
      ></i>
    </div>
    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
    <a-form-item
      labelAlign="left"
      :label="element.name"
      :label-col="{ span: element.options.labelCol }"
      :wrapper-col="{ span: element.options.wrapperCol }"
      :style="{width: element.options.width}"
    >
      <template v-if="element.type == 'input'">
        <a-input
          v-model="element.options.defaultValue"
          :placeholder="element.options.placeholder"
          :disabled="element.options.disabled"
          size="small"
        />
      </template>
      <template v-if="element.type == 'textarea'">
        <a-textarea
          v-model="element.options.defaultValue"
          :placeholder="element.options.placeholder"
          :disabled="element.options.disabled"
          :rows="element.options.rows"
          size="small"
        />
      </template>
      <template v-if="element.type == 'radio'">
        <a-radio-group v-model="element.options.defaultValue" :disabled="element.options.disabled">
          <a-radio v-for="(opt, index) in element.options.options" :value="opt.value" :key="opt.value + index">
            {{opt.label}}
          </a-radio>
        </a-radio-group>
      </template>
      <template v-if="element.type == 'checkbox'">
        <a-checkbox-group v-model="element.options.defaultValue" :disabled="element.options.disabled">
          <a-checkbox v-for="(opt, index) in element.options.options" :value="opt.value" :key="opt.value + index">
            {{opt.label}}
          </a-checkbox>
        </a-checkbox-group>
      </template>
    </a-form-item>
  </div>
</template>

<script>
export default {
  name: 'WidgetFormItem',
  props: ["data", "element", "select", "widgetIndex"],
  data() {
    return {
      selectWidget: this.select,
    };
  },
  watch: {
    select(newValue) {
      this.selectWidget = newValue;
    },
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
  methods: {
    handleSelectWidget(index) {
      this.$emit("update:select", this.data.list[index]);
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.data.list[index - 1];
        }
      } else {
        this.selectWidget = this.data.list[index + 1];
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
    handleWidgetClone(index) {
      const key =
        Date.parse(new Date().toString()) +
        "_" +
        Math.ceil(Math.random() * 99999);
      let cloneData = {
        ...this.data.list[index],
        options: {
          ...this.data.list[index].options,
          remoteFunc: "func_" + key,
        },
        key,
        model: this.data.list[index].type + "_" + key,
        rules: this.data.list[index].rules || [],
      };

      if (
        this.data.list[index].type === "radio" ||
        this.data.list[index].type === "checkbox" ||
        this.data.list[index].type === "select"
      ) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map((item) => ({ ...item })),
          },
        };
      }

      this.data.list.splice(index + 1, 0, cloneData);
      this.$nextTick(() => {
        this.selectWidget = this.data.list[index + 1];
      });
    },
  },
};
</script>

<style></style>
